<template>
	<div>
		<catch-table :form-create="formCreate" v-bind="table" />
		<el-drawer title="用户跟进记录" :visible.sync="drawer"   >
			<el-card class="box-card">
				<el-button type="primary" @click="addinfo">新增跟进记录</el-button>
			</el-card>

			<div v-for="(item,index) in infos" :key="index">
				<el-card class="box-card1">
					<div slot="header" class="clearfix">

						<el-button style="float: right; padding: 3px 0;margin-left: 10px;color: #d2112e;"
							type="text">跟进人：{{item.user}}</el-button>
						<el-button style="float: right; padding: 3px 0" type="text">跟进时间：{{item.created_at}}</el-button>
					</div>
					<div>
						{{item.info}}
					</div>
				</el-card>
			</div>



		</el-drawer>

		<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" >

			<div>
				<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
					<el-form-item label="跟进记录" prop="field101">
						<el-input v-model="formData.field101" type="textarea" placeholder="请输入多行文本"
							:autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
					</el-form-item>
					<el-form-item size="large">
						<el-button type="primary" @click="submitForm">提交</el-button>
						<el-button @click="resetForm">重置</el-button>
					</el-form-item>
				</el-form>
			</div>
		</el-dialog>


		<el-dialog  :visible.sync="dialogVisible1" width="30%" >


			<div class="member-preview">
				<el-descriptions title="会员信息预览" :column="2" border size="medium" class="member-descriptions">
					<!-- 基本信息 -->
					<el-descriptions-item label="姓名">{{ memberData.name }}</el-descriptions-item>
					<el-descriptions-item label="性别">{{ memberData.sex }}</el-descriptions-item>
					<el-descriptions-item label="生日">{{ memberData.shengri }}</el-descriptions-item>
					<el-descriptions-item label="属相">{{ memberData.shuxiang }}</el-descriptions-item>
					<el-descriptions-item label="身高">{{ memberData.shengao }}cm</el-descriptions-item>
					<el-descriptions-item label="体重">{{ memberData.tizhong }}kg</el-descriptions-item>
					<el-descriptions-item label="电话">{{ memberData.lianxi }}</el-descriptions-item>

					<!-- 教育背景 -->
					<el-descriptions-item label="学历">{{ memberData.xueli }}</el-descriptions-item>
					<el-descriptions-item label="民族">{{ memberData.minzu }}</el-descriptions-item>
					<el-descriptions-item label="婚姻情况" v-if="memberData.hunyin == 0">未婚</el-descriptions-item>
					<el-descriptions-item label="婚姻情况" v-if="memberData.hunyin == 1">离异</el-descriptions-item>
					<el-descriptions-item label="婚姻情况" v-if="memberData.hunyin == 2">丧偶</el-descriptions-item>
					<el-descriptions-item label="婚姻情况" v-if="memberData.hunyin == 3">短婚未育</el-descriptions-item>

					<!-- 资产信息 -->
					<el-descriptions-item label="是否有车">{{ memberData.che ? '有' : '无' }}</el-descriptions-item>
					<el-descriptions-item label="车贷">{{ memberData.chedai ? '有' : '无' }}</el-descriptions-item>
					<el-descriptions-item label="是否有房">{{ memberData.fang ? '有' : '无' }}</el-descriptions-item>
					<el-descriptions-item label="房贷">{{ memberData.fangdai ? '有' : '无' }}</el-descriptions-item>

					<!-- 收入情况 -->
					<el-descriptions-item label="收入">{{ memberData.shouru }}元/月</el-descriptions-item>

					<!-- 家庭情况 -->
					<el-descriptions-item label="父母情况">{{ memberData.fumu }}</el-descriptions-item>
					<el-descriptions-item label="子女情况">{{ memberData.zinv }}</el-descriptions-item>
					<el-descriptions-item label="兄弟姐妹">{{ memberData.jiemei }}</el-descriptions-item>

					<!-- 其他信息 -->
					<el-descriptions-item label="择偶要求">{{ memberData.yaoqiu }}</el-descriptions-item>
					<el-descriptions-item label="红娘老师">{{ memberData.laoshi }}</el-descriptions-item>
					<el-descriptions-item label="VIP等级">{{ memberData.vip }}</el-descriptions-item>
					<el-descriptions-item label="联系方式">{{ memberData.lianxi }}</el-descriptions-item>
					<el-descriptions-item label="工作内容">{{ memberData.gongzuo }}</el-descriptions-item>
				</el-descriptions>

				<!-- 会员照片 -->
				<div class="member-image" v-if="memberData.image">
					<el-image :src="memberData.image" fit="cover" style="width: 200px; height: 250px;"></el-image>
				</div>
				<div class="member-image" v-if="memberData.image1">
					<el-image :src="memberData.image1" fit="cover" style="width: 200px; height: 250px;"></el-image>
				</div>
				<div class="member-image" v-if="memberData.image2">
					<el-image :src="memberData.image2" fit="cover" style="width: 200px; height: 250px;"></el-image>
				</div>
			</div>



		</el-dialog>

	</div>

</template>

<script>
	
	import renderTable from '@/views/render-table-form'

	export default {
		mixins: [renderTable],
		data() {
			return {
				tableFrom: '',
				drawer: false,
				dialogVisible: false,
				dialogVisible1: false,
				formData: {
					field101: undefined,
					uid: undefined
				},
				rules: {
					field101: [{
						required: true,
						message: '请输入跟进记录',
						trigger: 'blur'
					}],
				},

				infos: undefined,
				memberData: {
					name: '张三',
					sex: '男',
					shengri: '1990-05-15',
					shuxiang: '马',
					shengao: 178,
					tizhong: 72,
					xueli: '本科',
					minzu: '汉族',
					che: true,
					chedai: false,
					fang: true,
					fangdai: true,
					shouru: 15000,
					fumu: '健在',
					jiemei: '1个姐姐',
					yaoqiu: '温柔贤惠，本科以上学历',
					laoshi: '李红娘',
					vip: '黄金会员',
					lianxi: '138****1234',
					image: 'https://example.com/member-image.jpg'
				}
			}
		},
		
		watch: {
			'formCreate.value.shengri'(newVal) {
			    console.log('属性变化:', newVal)
				this.formCreate.value.shuxiang =  this.getChineseZodiac(newVal)
				// this.formCreate.value.shengri =  this.formCreate.value.shengri.substring(0, 10);
			  }
		},
		methods: {
			// formatDateToYMD(dateTimeStr) {
			//   return dateTimeStr.split(' ')[0];
			// },
			/**
			 * 将日期转换为对应的生肖属相
			 * @param {string|Date} date - 日期字符串或Date对象
			 * @returns {string} 对应的生肖属相
			 */
			getChineseZodiac(date) {
			  // 处理输入日期
			  const inputDate = typeof date === 'string' ? new Date(date) : date;
			  
			  // 验证日期有效性
			  if (isNaN(inputDate.getTime())) {
			    throw new Error('无效的日期');
			  }
			  
			  // 获取年份（中国的生肖以农历新年为界，这里简化处理使用公历年份）
			  const year = inputDate.getFullYear();
			  
			  // 生肖数组（按顺序）
			  const zodiacs = ['鼠', '牛', '虎', '兔', '龙', '蛇', '马', '羊', '猴', '鸡', '狗', '猪'];
			  
			  // 计算生肖索引（生肖从鼠开始，2020年是鼠年）
			  const baseYear = 2020; // 2020年是鼠年
			  const index = (year - baseYear) % 12;
			  
			  // 处理负数情况
			  const zodiacIndex = index >= 0 ? index : index + 12;
			  
			  return zodiacs[zodiacIndex];
			},
			view(e) {
				console.log(e)
				this.dialogVisible1 = true
				this.memberData = e
			},
			genjin(e) {
				console.log(e)
				this.drawer = true
				this.formData.uid = e.id
				this.$http.get('userinfos/infos?id=' + e.id).then(r => {
					console.log(r)
					this.infos = r.data
				})
			},

			addinfo() {
				this.dialogVisible = true
			},
			submitForm() {
				this.$refs['elForm'].validate(valid => {
					if (!valid) return
					// TODO 提交表单
					this.$http.post('userinfos/addinfo', this.formData).then(r => {
						console.log(r)
						if (r.code == 10000) {
							this.$message.success('添加成功')
							this.dialogVisible = false
							this.drawer = false
							this.formData.field101 = ''


						}
					})
				})
			},
			resetForm() {
				this.$refs['elForm'].resetFields()
			},

		}
	}
</script>

<style>
	.box-card {
		margin-bottom: 20px;
	}

	.box-card1 {
		margin: 20px;
	}
</style>
</style>